<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 制作人信息 -->
    <!--PM:[xxx] Designer:[xxx] Developer:[] date:2018xxxx-->
    <title>详情</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="pragma" content="no-cach">
    <meta name="robots" content="all">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="date=no">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <div id="container" class="detail">
        <div class="banner  bg-white mb10">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"> <img src="./images/index1-banner.jpg" alt="" srcset=""></div>
                    <div class="swiper-slide">slider2</div>
                    <div class="swiper-slide">slider3</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="num">
                <div class="count"><span>￥9.9</span><span>￥99</span></div>
                <div class="month-sale">月销230笔</div>
            </div>

            <div class="name-with-share ">
                <p class="name">新高中高是新高中高是新高中高是新高中高是新高中高是新高中高是新高中高是新高中高是新高中高是新高中高是</p>
                <div class="share">
                    <img src="./images/a4.png" alt="">
                    <span>分享</span>
                </div>
            </div>
        </div>

        <div class="form-control bg-white mb10 detailPD">
            <div class="label">级别选择</div>
            <div class="value">
                <div class="checkbox-control contact">
                    <label>
                        <input type="checkbox" name="level" value="L1-L3">
                        <span>L1-L3</span>
                    </label>
                    <label>
                        <input type="checkbox" name="level" value="L4-L6">
                        <span>L4-L6</span>
                    </label>
                    <label>
                        <input type="checkbox" name="level" value="L7-L8">
                        <span>L7-L8</span>
                    </label>
                    <label>
                        <input type="checkbox" name="level" value="L8-L9">
                        <span>L8-L9</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="bg-white mb10 detailPD  pj-block">
            <div class="pj"><span>商品评价（10）</span><a href="javascript:viod(0)">查看全部</a></div>
            <div class="pj-item">
                <img src="./images/default.png" alt="">
                <span class="pj-name">小****才</span>
                <span class="pj-msg">感谢老师很详细的讲解</span>
            </div>

            <div class="pj-item">
                <img src="./images/default.png" alt="">
                <span class="pj-name">小****才</span>
                <span class="pj-msg">感谢老师很详细的讲解</span>
            </div>
        </div>

        <div class="good-detail bg-white mb10 detailPD">
            <h4>商品详情</h4>
            <ul class="good-detai-list">
                <li>
                    <img src="./images/detail.jpg" alt="">
                </li>
            </ul>

        </div>
    </div>
    <div id="menu">
        <a href="./index.html">
            <div class="icon icon-all-goods"></div>
            <p>首页</p>
        </a>
        <a href="#">
            <div class="icon icon-kefu-goods"></div>
            <p>客服</p>
        </a>
        <a href="#" class="on">
            <div class="icon icon-collect-goods"></div>
            <p>收藏</p>
        </a>
        <div class="btns">
            <a id="btn-addShopCart-hook" href="javascript:void(0);"><img src="./images/jrgw.png" alt="" srcset=""></a>
            <a id="btn-buyNow-hook" href="javascript:void(0);"><img src="./images/ljgm.png" alt="" srcset=""></a>
        </div>

        <!-- <a class="btn" id="btn-buy-hook">立即购买</a> -->
    </div>


    <div class="shade" id="shade-hook"></div>
    <div class="buy-card" id="buy-card-hook">
        <div class="good-msg">
            <img src="./images/good.jpg" alt="">
            <div>
                <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                <p class="old-count">￥2,000</p>
                <div class="new-count"><span>￥1,000</span><span class="tip">三人拼团价</span></div>
            </div>
        </div>

        <form action="./payafter.html" id="myform">
            <input type="text" name="type" style="display: none;" id="fType">
            <div class="form-control">
                <div class="label">购买数量</div>
                <div class="value">
                    <div class="num-control">
                        <span id="num-control-sub-hook" class=" iconfont iconjianhaoshouqi"></span>
                        <input id="num-control-input-hook" type="number" name="num" value="1">
                        <span id="num-control-add-hook" class=" iconfont iconjiahaozhankai "></span>
                    </div>
                </div>

            </div>

            <div class="form-control">

                <div class="label">选择级别</div>
                <div class="value">
                    <div class="checkbox-control contact">
                        <label>
                            <input type="checkbox" name="level" value="L1-L3">
                            <span>L1-L3</span>
                        </label>
                        <label>
                            <input type="checkbox" name="level" value="L4-L6">
                            <span>L4-L6</span>
                        </label>
                    </div>
                </div>

            </div>

            <div class="form-control">
                <div class="label">请输入手机号</div>
                <div class="value">
                    <input type="text" name="phone" class="phone" placeholder="" maxlength="11"
                        onkeyup="this.value=this.value.replace(/\D/g,'')">
                </div>

            </div>

            <button type="submit" class="submit">下一步</button>
        </form>

        <div class="close iconfont iconguanbi" id="close-buy-card-hook"></div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script>
        $('#btn-addShopCart-hook').click(function () {
            $("#fType").val(1)
            $('#shade-hook').show();
            $('#buy-card-hook').slideDown(300);
        })

        $('#btn-buyNow-hook').click(function () {
            $("#fType").val(2)
            $('#shade-hook').show();
            $('#buy-card-hook').slideDown(300);
        })


        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                disableOnInteraction: false,
            }, //可选选项，自动滑动
            pagination: {
                el: '.swiper-pagination',
            },
        })

        $(".contact input").change(function () {
            if ($(this).prop("checked")) {
                $(".contact input[value=" + this.value + "]").prop('checked', true)
            } else {
                $(".contact input[value=" + this.value + "]").prop('checked', false)
            }
        })


        $('.phone').keyup(function () {
            validatePhone(this.value, $(this).parent())
        })

        function validatePhone(phone, $pEl) {
            if (!(/^1[3456789]\d{9}$/.test(phone))) {
                if ($pEl.find('.error').length == 1) {
                    $pEl.find('.error').text('请输入正确的手机号！')
                } else {
                    $pEl.append(
                        '<div class="error" style="position: absolute;color: red;font-size: 12px;right: 0;bottom: 1.125rem;">请输入正确的手机号！</div>'
                        )
                }
                return false;
            }
            $pEl.find('.error').text('')
            return true
        }
        $('#myform').submit(function (e) {
            var phone = $(this).find('.phone').val();
            if (!validatePhone(phone, $(this).find('.phone').parent())) {
                e.preventDefault();
                e.stopPropagation();
            }


        })
    </script>
    <script src="./js/main.js"></script>
    <script>
        //  min min最小值 max最大值 超出的区间 设置的value会变成边界值
        new NumControl("#num-control-input-hook", '#num-control-add-hook', '#num-control-sub-hook', {
            min: 2,
            max: 100
        });
    </script>
</body>

</html>